<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.sort" style="width: 160px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-input v-model="listQuery.title" placeholder="请输入关键字" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">{{ $t('table.add') }}</el-button>
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">{{ $t('table.export') }}</el-button>
      <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">{{ $t('table.reviewer') }}</el-checkbox>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;" @sort-change="sortChange">
      <el-table-column label="编号" prop="id" sortable="custom" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="门店名称" min-width="80px">
        <template slot-scope="scope">
          <span class="link-type" @click="handleUpdate(scope.row)">{{ scope.row.title }}</span>
          <el-tag>{{ scope.row.type | typeFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="id" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所在地" prop="id" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="真实姓名" prop="id" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人真实姓名" prop="id" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人手机号" prop="id" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="加入日期" width="150px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="账号" align="center" width="95">
        <template slot-scope="scope">
          <span v-if="scope.row.pageviews" class="link-type" @click="handleFetchPv(scope.row.pageviews)">{{ scope.row.pageviews }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
          <el-button v-if="scope.row.status!='published'" size="mini" type="success" @click="handleModifyStatus(scope.row,'published')">{{ $t('table.publish') }}
          </el-button>
          <el-button v-if="scope.row.status!='draft'" size="mini" @click="handleModifyStatus(scope.row,'draft')">{{ $t('table.draft') }}
          </el-button>
          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="门店名称" prop="type">
          <el-select v-model="temp.type" class="filter-item" placeholder="请选择">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="门店简介">
          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.remark" type="textarea" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="门店经纬度" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <el-form-item label="门店地址" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <el-form-item label="门店负责人" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <el-form-item label="负责人手机" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <el-form-item label="所在地" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
        <el-form-item label="账号昵称" prop="title">
          <el-input v-model="temp.title" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
	fetchList,
	fetchPv,
	createArticle,
	updateArticle
} from "@/api/article";
import waves from "@/directive/waves"; // Waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

const calendarTypeOptions = [
	{ key: "CN", display_name: "China" },
	{ key: "US", display_name: "USA" },
	{ key: "JP", display_name: "Japan" },
	{ key: "EU", display_name: "Eurozone" }
];

// arr to obj ,such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
	acc[cur.key] = cur.display_name;
	return acc;
}, {});

export default {
	name: "ComplexTable",
	components: { Pagination },
	directives: { waves },
	filters: {
		statusFilter(status) {
			const statusMap = {
				published: "success",
				draft: "info",
				deleted: "danger"
			};
			return statusMap[status];
		},
		typeFilter(type) {
			return calendarTypeKeyValue[type];
		}
	},
	data() {
		return {
			tableKey: 0,
			list: null,
			total: 0,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 20,
				importance: undefined,
				title: undefined,
				type: undefined,
				sort: "请选择门店类型"
			},
			// importanceOptions: [1, 2, 3],
			calendarTypeOptions,
			sortOptions: [
				{ label: "全部", key: "0" },
				{ label: "加盟店", key: "1" },
				{ label: "直营店", key: "2" }
			],
			statusOptions: ["published", "draft", "deleted"],
			showReviewer: false,
			temp: {
				id: undefined,
				importance: 1,
				remark: "",
				timestamp: new Date(),
				title: "",
				type: "",
				status: "published"
			},
			dialogFormVisible: false,
			dialogStatus: "",
			textMap: {
				update: "编辑",
				create: "新增门店"
			},
			dialogPvVisible: false,
			pvData: [],
			rules: {
				type: [
					{
						required: true,
						message: "type is required",
						trigger: "change"
					}
				],
				timestamp: [
					{
						type: "date",
						required: true,
						message: "timestamp is required",
						trigger: "change"
					}
				],
				title: [
					{
						required: true,
						message: "title is required",
						trigger: "blur"
					}
				]
			},
			downloadLoading: false
		};
	},
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.listLoading = true;
			fetchList(this.listQuery).then(response => {
				console.log(response, "kkk");
				this.list = response.data.items;
				this.total = response.data.total;

				// Just to simulate the time of the request
				setTimeout(() => {
					this.listLoading = false;
				}, 1.5 * 1000);
			});
		},
		handleFilter() {
			this.listQuery.page = 1;
			this.getList();
		},
		handleModifyStatus(row, status) {
			this.$message({
				message: "操作成功",
				type: "success"
			});
			row.status = status;
		},
		sortChange(data) {
			const { prop, order } = data;
			if (prop === "id") {
				this.sortByID(order);
			}
		},
		sortByID(order) {
			if (order === "ascending") {
				this.listQuery.sort = "+id";
			} else {
				this.listQuery.sort = "-id";
			}
			this.handleFilter();
		},
		resetTemp() {
			this.temp = {
				id: undefined,
				importance: 1,
				remark: "",
				timestamp: new Date(),
				title: "",
				status: "published",
				type: ""
			};
		},
		handleCreate() {
			this.resetTemp();
			this.dialogStatus = "create";
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].clearValidate();
			});
		},
		createData() {
			this.$refs["dataForm"].validate(valid => {
				if (valid) {
					this.temp.id = parseInt(Math.random() * 100) + 1024; // mock a id
					this.temp.author = "vue-element-admin";
					createArticle(this.temp).then(() => {
						this.list.unshift(this.temp);
						this.dialogFormVisible = false;
						this.$notify({
							title: "成功",
							message: "创建成功",
							type: "success",
							duration: 2000
						});
					});
				}
			});
		},
		handleUpdate(row) {
			this.temp = Object.assign({}, row); // copy obj
			this.temp.timestamp = new Date(this.temp.timestamp);
			this.dialogStatus = "update";
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].clearValidate();
			});
		},
		updateData() {
			this.$refs["dataForm"].validate(valid => {
				if (valid) {
					const tempData = Object.assign({}, this.temp);
					tempData.timestamp = +new Date(tempData.timestamp); // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
					updateArticle(tempData).then(() => {
						for (const v of this.list) {
							if (v.id === this.temp.id) {
								const index = this.list.indexOf(v);
								this.list.splice(index, 1, this.temp);
								break;
							}
						}
						this.dialogFormVisible = false;
						this.$notify({
							title: "成功",
							message: "更新成功",
							type: "success",
							duration: 2000
						});
					});
				}
			});
		},
		handleDelete(row) {
			this.$notify({
				title: "成功",
				message: "删除成功",
				type: "success",
				duration: 2000
			});
			const index = this.list.indexOf(row);
			this.list.splice(index, 1);
		},
		handleFetchPv(pv) {
			fetchPv(pv).then(response => {
				this.pvData = response.data.pvData;
				this.dialogPvVisible = true;
			});
		},
		handleDownload() {
			this.downloadLoading = true;
			import("@/vendor/Export2Excel").then(excel => {
				const tHeader = [
					"timestamp",
					"title",
					"type",
					"importance",
					"status"
				];
				const filterVal = [
					"timestamp",
					"title",
					"type",
					"importance",
					"status"
				];
				const data = this.formatJson(filterVal, this.list);
				excel.export_json_to_excel({
					header: tHeader,
					data,
					filename: "table-list"
				});
				this.downloadLoading = false;
			});
		},
		formatJson(filterVal, jsonData) {
			return jsonData.map(v =>
				filterVal.map(j => {
					if (j === "timestamp") {
						return parseTime(v[j]);
					} else {
						return v[j];
					}
				})
			);
		}
	}
};
</script>
